<style scoped lang="less"></style>
<template>
    <iot-blk class="today-blk device-blk" title="设备统计" :moreType="0">
        <div class="total pointer" @click="showDevice('')">
            <p class="fm-num color-green">{{ data.allCount }}</p>
            <p>设备总数</p>
        </div>
        <div class="stat flex">
            <div class="flex-1 pointer" @click="showDevice('1')">
                <p class="fm-num color-org">{{ data.normalCount }}</p>
                <p>正常设备</p>
            </div>
            <div class="flex-1 pointer" @click="showDevice('2')">
                <p class="fm-num color-org">{{ data.alarmCount }}</p>
                <p>报警设备</p>
            </div>
            <div class="flex-1 pointer" @click="showDevice('3')">
                <p class="fm-num color-org">{{ data.offLineCount }}</p>
                <p>离线设备</p>
            </div>
            <div class="flex-1 pointer" @click="showDevice('4')">
                <p class="fm-num color-org">{{ data.faultCount }}</p>
                <p>故障设备</p>
            </div>
        </div>
        <!-- list start -->
        <el-dialog
            v-if="listModalVisible"
            title="设备列表"
            :visible.sync="listModalVisible"
            :width="1450 * scale + 'px'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <List :scale="scale" :type="type" :state="activeState"></List>
        </el-dialog>
        <!-- list end -->
    </iot-blk>
</template>
<script>
import { mapState } from "vuex"
import List from "@/components/iot/DeviceList.vue"
export default {
    name: "IOTDevice",
    components: {
        List,
    },
    props: {
        type: {
            type: String,
            default: "fireControl",
        },
        data: {
            type: Object,
            default() {
                return {}
            },
        },
    },
    computed: {
        ...mapState(["scale"]),
    },
    watch: {},
    data() {
        return {
            loading: false,
            listModalVisible: false,
            activeState: "",
        }
    },
    methods: {
        showDevice(deviceState) {
            this.activeState = deviceState
            this.listModalVisible = true
        },
    },
    created() {
        //
    },
}
</script>
